<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%"></div>
		<!-- Application   -->
		<div class="application m1280">Application</div>
		<!-- Nathan Sudds  -->
		<div class="sudds m1280">
			<div class="top f f-a-c f-j-b">
				<div class="left f f-a-c">
					<img :src="obj.buyerAvatar" alt="" />
					<div class="name">
						<div class="topName">{{ obj.buyerFirstName }} {{ obj.buyerLastName }}</div>
						<div class="ago">{{ getTimes(obj.lastLogin) }}</div>
					</div>
				</div>
			</div>

			<!-- 文本 -->
			<div class="biao">
				<div class="title">{{ obj.descriptionTitle }}</div>
				<div class="count">
					{{ obj.descriptionDetail }}
				</div>
			</div>
			<!-- topcs -->
			<div class="topcs f f-a-c">
				<div class="topics">Topics：</div>
				<div v-for="(ite, ind) in obj.topicNames" :key="ind" class="neiItem">{{ ite }}</div>
			</div>
			<!-- 线 -->
			<div class="xian"></div>
			<!-- Estimated duration -->
			<div class="duration f f-a-c f-j-b">
				<div class="lefName">
					<div class="name f f-a-c">Estimated duration</div>
					<input type="text" class="inps" :disabled="true" style="background-color: #f7f7f9" v-model="num" placeholder="" name="" id="" />
				</div>
				<div class="lefName">
					<div class="name f f-a-c">Suggest duration</div>
					<el-select v-model="value" placeholder="Select option" size="large" style="width: 100%">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</div>
			</div>
			<div class="duration f f-a-c f-j-b">
				<div class="lefNames">
					<div class="name f f-a-c">Price offer</div>
					<input type="text" class="inps" v-model="offer" placeholder="$" name="" id="" />
				</div>
			</div>
			<div class="duration f f-a-c f-j-b">
				<div class="lefNames">
					<div class="name f f-a-c">Message</div>
					<a-textarea v-model:value="message" placeholder="Type something..." :auto-size="{ minRows: 5, maxRows: 5 }" />
				</div>
			</div>
			<!-- btn -->
			<div class="btnBox f f-a-c">
				<div @click="applyBtn" class="btn hand">Apply</div>
			</div>
		</div>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ref, onMounted } from "vue";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import { EchoRequestCount, CreateApply, SellerReviselicationList } from "@/api/xpert.js";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import { ElMessage } from "element-plus";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	import { useRoute } from "vue-router";
	import { getTimes } from "@/utils/setting.js";

	let statusTab = ref(1);
	let num = ref("30minns");
	let value = ref("");
	let offer = ref("");
	let message = ref("");
	let total = ref(0);
	let pageNum = ref(1);
	let pageSize = ref(2);
	let route = useRoute();
	let obj = ref({});
	let id = route.query.id || 0;
	let act = route.query.act || 1;
	let listId = route.query.listId || 1;
	const options = [
		{
			value: "30",
			label: "30mins"
		},
		{
			value: "60",
			label: "60mins"
		},
		{
			value: "90",
			label: "90mins"
		}
	];
	onMounted(() => {
		if (id) {
			initList();
		}
		window.addEventListener("scroll", handleScroll);
	});
	// 点击apply
	const applyBtn = async () => {
		if (act == 2) {
			// 表示修改
			let n = await SellerReviselicationList({
				id: listId,
				requestId: id,
				message: message.value,
				priceOffer: offer.value,
				suggestDuration: value.value
			});
			if (n.code == 200) {
				ElMessage.success(n.msg);
				router.go(-1);
			}
		} else {
			// 表示申请
			let n = await CreateApply({
				requestId: id,
				message: message.value,
				priceOffer: offer.value,
				suggestDuration: value.value
			});
			if (n.code == 200) {
				ElMessage.success(n.msg);
				router.go(-1);
			}
		}
	};
	const initList = async () => {
		let n = await EchoRequestCount({
			id: id,
			pageNum: pageNum.value,
			pageSize: pageSize.value
		});
		obj.value = n.data;
		total.value = n.data.total;
		num.value = n.data.estimatedDuration + "mins";
	};
	// 去申请
	const goApply = () => {
		router.push({
			path: "/Request/RequestApply"
		});
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
